<template>

  <scroll-view scroll-y="true" class="scroll-Y" :class="$style.notice_container"
    style="height: 100vh; width: 100vw;background:#fff;border-radius: 0;" >

    <block v-for="(item, index) in noticeList" :key="item.id">
      <view :class="$style.notice_item">
        <view class="flex items-center justify-between" :class="$style.header">
          <view :class="$style.station">{{ item.station }}</view>
          <view :class="$style.people">{{ item.people }}</view>
          <view :class="$style.time">
            <text :class="$style.number">{{ item.time }}</text>
            <text :class="$style.people">分钟前</text>
          </view>
          <view :class="$style.receive">{{ item.receive + '人接收' }}</view>
        </view>

        <view :class="$style.notice_content">{{ item.content }}</view>
        <view class="relative" v-if="item.isReceived === 0" style="width: 100%; height: 50rpx;">
          <button :class="$style.button" class="absolute right-0" @click="confirmReceive(index)">收到</button>
        </view>
      </view>

    </block>

  </scroll-view>

</template>

<script setup lang='ts'>
import { reactive } from "vue";

let noticeList = reactive<any>([
  {
    id: 0,
    station: "夫子庙站",
    people: "王强",
    time: "13",
    receive: 120,
    content: "重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx",
    isReceived: 1,
  },
  {
    id: 1,
    station: "夫子庙站",
    people: "王强",
    time: "7",
    receive: 120,
    content: "重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx",
    isReceived: 1,
  },
  {
    id: 2,
    station: "夫子庙站",
    people: "王强",
    time: "7",
    receive: 120,
    content: "重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx重要通知xxxxxxxxxxxxxxxxxx",
    isReceived: 0,
  },

]);

function confirmReceive(index: number) {
  console.log(noticeList[index]);
  // 确认接收到通知
  noticeList[index].isReceived = 1;
  // 接收人数 + 1
  noticeList[index].receive += 1;
  // TODO 将状态传送给服务器

}
</script>

<style lang='less' module>
.notice_container {
  height: 550rpx;
  width: calc(100% - 60rpx);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  z-index: 20;
  padding: 20rpx;
  box-sizing: border-box;

  .notice_item {
    width: 690rpx;
    min-height: 150rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
    border-radius: 20rpx;
    font-family: Microsoft YaHei;
    color: #333333;
    font-weight: bold;
    padding: 20rpx;
    box-sizing: border-box;
    margin: 0 0 30rpx 10rpx;

    .station {
      font-size: 28rpx;
    }

    .people {
      font-weight: 400;
      font-size: 24rpx;
    }

    .number {
      font-size: 36rpx;
      font-family: Digital;
      color: #ea1f13;
      margin-right: 10rpx;
    }

    .receive {
      font-size: 24rpx;
      color: #375ce4;
    }

    .notice_content {
      margin: 20rpx 0;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      text-indent: 2em;
    }

    .button {
      width: 120rpx;
      height: 48rpx;
      background: linear-gradient(129deg, #5678f4 0%, #ff0020 100%);
      border-radius: 24rpx;
      font-size: 24rpx;
      line-height: 47rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
